<template>
    <div class="app-container">
        <header>
            <el-form :model="form" label-width="130px" inline>
                <el-form-item label="学员姓名" label-width="70px">
                    <el-input v-model="form.name" size="small"></el-input>
                </el-form-item>
                <el-form-item label="进度">
                    <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车型">
                    <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="本次收费">
                    <el-input v-model="form.name" size="small"></el-input>
                </el-form-item>

                <el-form-item label="收据/发票号">
                    <el-input v-model="form.name" size="small"></el-input>
                </el-form-item>

                <el-form-item lang=" ">
                    <div @click="showMore = !showMore" style="color: #606266;cursor: pointer;
                        position: absolute;width: 100px;margin-left: 15px;">{{ showMore ? '收起更多' : '展开更多' }}</div>
                </el-form-item>

                <template v-if="showMore">
                    <el-form-item label="收费类型" label-width="70px">
                        <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收费方式">
                        <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核">
                        <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="教练">
                        <el-input v-model="form.name" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="收款人">
                        <el-input v-model="form.name" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="收款单号" label-width="70px">
                        <el-input v-model="form.name" style="width:202px" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="收款备注" label-width="113px">
                        <el-input v-model="form.name" size="small"></el-input>
                    </el-form-item>

                    <el-form-item label="开始收费日期">
                        <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.name" type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="截止收费日期">
                        <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.name" type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>


                    <el-form-item label=" " label-width="105px">
                        <el-checkbox v-model="form.name">收费清单显示教练</el-checkbox>
                    </el-form-item>
                </template>

            </el-form>
            <div class="btn mt-1">
                <div class="btn_item1">
                    <el-button type="primary" icon="el-icon-search" size="small ">查询</el-button>
                    <el-button type="info" plain size="small">取消审核</el-button>
                    <el-button type="info" plain size="small">批量审核</el-button>
                    <el-button type="info" plain size="small">收费清单打印</el-button>
                    <el-button type="info" plain size="small">收据打印</el-button>
                    <el-button type="info" plain size="small">打印</el-button>
                    <el-button type="info" plain size="small">导出</el-button>
                </div>
                <div class="btn_item2">
                    <el-button type="primary" size="small" plain icon="el-icon-menu" @click="setColumm">设置列</el-button>
                </div>
            </div>
        </header>

        <main>
            <div :style="{ height: tabelHeight, marginTop: '10px'}">
                <el-table :data="tableData" ref="tableRef2" height="100%" border stripe
                    :default-sort="{ prop: 'date', order: 'descending' }" row-key="line">
                    <el-table-column type="selection" width="55" align="center" fixed="left" />
                    <el-table-column :prop="headerTable[index].prop" label="序号" sortable width="120" align="center"
                        fixed="left" />
                    <el-table-column :prop="headerTable[index + 1].prop" label="PID" fixed="left" sortable width="120"
                        align="center">
                        <template slot-scope="scope">
                            <span style="color: #4d4de2;cursor: pointer;"
                                @click="go(scope.row, 'http://jx.qida999.com/drivercommon/driver/dr_person.html')">{{
                                    scope.row.pid }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :prop="headerTable[index + 2].prop" sortable fixed="left" label="姓名" width="120"
                        align="center">
                        <template slot-scope="scope">
                            <span style="color: #4d4de2;cursor: pointer;"
                                @click="go(scope.row, 'http://jx.qida999.com/DriverCommon/driver/dr_money.html')">{{
                                    scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :prop="headerTable[index + 3].prop" sortable label="身份证号" width="220" align="center" />
                    <el-table-column :prop="headerTable[index + 4].prop" sortable label="车型" width="120" align="center" />
                    <el-table-column :prop="headerTable[index + 5].prop" sortable label="类型" width="120" align="center" />
                    <el-table-column :prop="headerTable[index + 6].prop" sortable label="收费类型" width="120" align="center" />
                    <el-table-column :prop="headerTable[index + 7].prop" sortable label="收款单号" width="120" align="center">
                        <template slot-scope="scope">
                            <span style="color: #4d4de2;cursor: pointer;" @click="go2(scope.row)">{{ scope.row.DDNO
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :prop="headerTable[index + 8].prop" sortable label="欠款金额" width="120" align="center" />
                    <el-table-column :prop="headerTable[index + 9].prop" sortable label="本次收费" width="120" align="center" />
                    <el-table-column :prop="headerTable[index + 10].prop" sortable label="报名日期" width="120"
                        align="center" />
                    <el-table-column :prop="headerTable[index + 11].prop" sortable label="挂靠点" width="120" align="center" />
                    <el-table-column :prop="headerTable[index + 12].prop" sortable label="收款日期" width="150"
                        align="center" />
                    <el-table-column :prop="headerTable[index + 13].prop" sortable label="收款人" width="120" align="center" />
                    <el-table-column :prop="headerTable[index + 14].prop" sortable label="付款方式" width="120"
                        align="center" />
                    <el-table-column :prop="headerTable[index + 15].prop" sortable label="审核人" width="120" align="center" />
                    <el-table-column :prop="headerTable[index + 16].prop" sortable label="收银备注" width="280"
                        align="center" />
                    <el-table-column :prop="headerTable[index + 17].prop" sortable label="收据发票" width="200"
                        align="center" />
                </el-table>
            </div>
        </main>

        <!-- 分页 -->
        <footer>
            <p>本次收费累计：<span style="color:#409eff">￥{{ 999 }}元 </span></p>
            <div class="pagin">
                <el-pagination background :current-page="initParams.page" :page-sizes="[20, 50, 100, 150]"
                    :page-size="initParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change='handleSizeChange' @current-change='handleCurrentChange' />
            </div>
        </footer>


        <el-drawer title="表格条件显示或导出列设置" :visible.sync="drawer" append-to-body :modal-append-to-body="false"
            :direction="direction" :size="452">
            <span style="display: inline-block; width: 100%; text-align: center;margin: 10px auto ;">可拖拽排序</span>
            <el-table ref="tableRef" :data="table" border row-key="id" class="move">
                <el-table-column property="id" label="序号" width="100px" align="center" />
                <el-table-column property="name" label="列名" width="150px" align="center" />
                <el-table-column property="address" label="是否显示" width="200px" align="center">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.$index" />
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
    </div>
</template>

<script>
import Sortable from 'sortablejs'
import { MoneyListAPI } from '@/api/adminstare'
import { oldLoginSystem } from '@/utils/publicMethod'
import { mapGetters } from 'vuex'
/**
* @author        Yng
* @time          2023-11-07 17:06:26  星期二
* @description   学员收费管理
**/


export default {
    data() {
        return {
            form: {
                region: '',
                name: ''
            },
            showMore: false,
            tabelHeight:'640px',
            tableData: [],
            table: [{ id: 1, name: '123', address: '789' }, { id: 2, name: '123', address: '789' }],
            drawer: false,
            direction: 'rtl',
            // 初始化参数
            initParams: {
                action: 'moneyList',
                svdate: '',
                evdate: '',
                name: '',
                rec: '',
                moneytype: 'income',
                pmoneytype: '',
                sortStr: "id desc",
                money: '',
                skr: '',
                ywtype: '',
                state: '',
                leader: '',
                cid: '',
                fkfs: '',
                sure: '',
                DDNO: '',
                car: '',
                ep: '',
                showLeader: '',
                page: 1,
                pageSize: 20,
            },
            // 总条数
            total: 0,
            // 表头索引
            index: 0,
            // 动态表头
            headerTable: [
                {
                    label: '序号',
                    prop: 'line'
                },
                {
                    label: 'PID',
                    prop: 'pid'
                },
                {
                    label: '姓名',
                    prop: 'name'
                },
                {
                    label: '身份证号',
                    prop: 'idcard'
                },
                {
                    label: '车型',
                    prop: 'car'
                },
                {
                    label: '类型',
                    prop: 'tp'
                },
                {
                    label: '收费类型',
                    prop: 'type'
                },
                {
                    label: '收款单号',
                    prop: 'DDNO'
                },
                {
                    label: '欠款金额',
                    prop: 'sumlost_money'
                },
                {
                    label: '本次收费',
                    prop: 'act_money'
                },
                {
                    label: '报名日期',
                    prop: 'time'
                },
                {
                    label: '挂靠点',
                    prop: 'com_namestr'
                },
                {
                    label: '收款日期',
                    prop: 'edittime'
                },
                {
                    label: '收款人',
                    prop: 'skr'
                },
                {
                    label: '付款方式',
                    prop: 'fkfs'
                },
                {
                    label: '审核人',
                    prop: 'sure'
                },
                {
                    label: '收银备注',
                    prop: 'ep'
                },
                {
                    label: '收据发票',
                    prop: 'rec'
                },
            ]
        }
    },
    mounted() {
        this.StudentChager()
        this.tableMove()
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    watch: {
        showMore(newValue, oldValue) { 
            newValue ? this.tabelHeight = '550px' : this.tabelHeight = '640px'
        }
    },
    methods: {
        setColumm() {
            this.drawer = true
            this.$nextTick(() => {
                this.pullSort()
            })
        },

        tableMove() {
            this.$nextTick(() => {
                this.pullSort2()
            })
        },
        // 表格行拖拽
        pullSort() {
            const tableCell = this.$refs.tableRef.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
            Sortable.create(tableCell, {
                animation: 600, //拖拽动画(毫秒)
                setData: function (dataTransfer) {
                    dataTransfer.setData("Text", "");
                },
                // 结束拖拽
                onEnd: (e) => {
                    const oldRow = this.table[e.oldIndex]; // 移动元素集合
                    const newRow = this.table[e.newIndex]; // 新的元素集合
                    console.log(oldRow, "移动元素集合");
                    console.log(newRow, "新的元素集合");
                    // 调用接口传参即可
                },
            })
        },
        // 表头列拖拽
        pullSort2() {
            // 通过ref获取Dom节点或document
            // const tableheader = document.querySelector('.el-table__header-wrapper tr');
            const tableheader = this.$refs.tableRef2.$el.querySelector(".el-table__header-wrapper tr");
            Sortable.create(tableheader, {
                animation: 400, //拖拽动画(毫秒)
                // 结束拖拽
                onEnd: evt => {
                    const empty = 1
                    console.log('evt :>> ', evt.oldIndex);
                    const oldItem = this.headerTable[evt.oldIndex - empty];
                    this.headerTable.splice(evt.oldIndex - empty, 1);
                    this.headerTable.splice(evt.newIndex - empty, 0, oldItem);
                    console.log('this.headerTable :>> ', this.headerTable);
                   
                },
            })
        },

        // 获取学员收费数据
        async StudentChager() {
            let { code, data, total } = await MoneyListAPI(this.initParams)
            if (!code) {
                this.tableData = data
                this.total = total
            }
        },
        //  跳旧版详情
        go(val, URL) {
            const redirectUrl = `${URL}?aid=${this.userInfo.jxid}&id=${val.pid}`
            const url = 'http://jx.qida999.com/DriverCommon/CommApiNew/login/Login.aspx'
            oldLoginSystem(redirectUrl, url)
        },

        go2(val) {
            const redirectUrl = `http://jx.qida999.com/DriverCommon/driver/report/dr_pmoneys_rpt_1.aspx?aid=${this.userInfo.jxid}&ddno=${val.DDNO}&ddno2=${val.DDNO2}`
            const url = 'http://jx.qida999.com/DriverCommon/CommApiNew/login/Login.aspx'
            oldLoginSystem(redirectUrl, url)
        },
        // 一页几条数据
        handleSizeChange(val) {
            this.initParams.pageSize = val
            this.StudentChager();

        },
        // 当前页
        handleCurrentChange(val) {
            this.initParams.page = val
            this.StudentChager();
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    .btn {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .btn_item2 {
            width: 400px;
            display: flex;
            justify-content: flex-end;
        }
    }

    main>div {
        height: 580px;
    }

    footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;

        p {
            width: 100%;
            margin-bottom: 0;

            &::before {
                display: inline-block;
                content: '';
                width: 13px;
                height: 13px;
                border-radius: 50%;
                background: #409eff;
                margin-right: 5px;
            }
        }
    }

}

.move {
    cursor: move;
}

::v-deep #el-drawer__title {
    margin-bottom: 10px;
}

::v-deep .el-form-item {
    margin-bottom: 4px !important;
}

::v-deep .el-table__fixed-header-wrapper table thead tr>th {
    cursor: not-allowed !important;
}

::v-deep th:nth-child(n+5) {
    cursor: move !important;
}
</style>